<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import type {
  UserAddType,
  UserEditType,
  UserListType,
} from "@/types/UserType.ts";
import { postUserAdd, postUserUpdate } from "@/services/userApi.ts";
import JinAvatarUpload from "@/components/framework/jin-upload/jin-avatar-upload.vue";
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import type { FormRule } from "@/types/commonType.ts";
import matchRules from "@/utils/Regexp";
import { FormInstance, Message } from "@arco-design/web-vue";
import useFormSubmit from "@/hooks/useFormSubmit.ts";

const formRef = ref<FormInstance>();

const loading = ref(false);

const handleSubmit = useFormSubmit(formRef);

const emits = defineEmits<{
  (e: "list"): void;
}>();

const drawer = ref<{
  init: () => void;
  close: () => void;
}>();

const options = reactive({
  title: "",
  type: 0,
});

const formModel = reactive<UserEditType>({
  id: "",
  realname: "",
  username: "",
  phone: "",
  avatar: "",
  password: "",
  sex: 0,
  email: "",
  birthday: "",
  status: 1,
});

const rules = reactive<FormRule<keyof UserAddType>>({
  status: {
    required: false,
  },
  realname: {
    required: true,
    message: "请输入用户姓名",
  },
  username: {
    required: true,
    message: "请输入用户账号",
  },
  phone: [
    {
      required: true,
      message: "请输入手机号",
    },
    {
      match: matchRules.getRegexp("CNphoneRules"),
      message: "手机号格式错误",
    },
  ],
  avatar: {
    required: true,
    message: "请上传头像",
  },
  password: [
    {
      required: true,
      message: "请输入密码",
    },
    {
      match: matchRules.getRegexp("passwordRules"),
      message:
        "密码必须至少6个字符长，包含至少一个数字、一个大写字母和一个小写字母",
    },
  ],
  sex: {
    required: false,
    message: "请选择性别",
  },
  email: [
    {
      required: true,
      message: "请输入邮箱",
    },
    {
      match: matchRules.getRegexp("emailRules"),
      message: "邮箱格式错误",
    },
  ],
  birthday: {
    required: true,
    message: "请选择生日日期",
  },
});

const handleCancel = () => {
  drawer.value?.close();
};

const promise = (url: any, msg: string) => {
  url
    .then((res: any) => {
      if (res.code === 200) {
        Message.success(msg);
        handleCancel();
        emits("list");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleOk = () => {
  loading.value = true;
  const user = JSON.parse(JSON.stringify(formModel));
  if (options.type === 0) {
    delete user.id;
    promise(postUserAdd(user), "新增成功");
  }
  if (options.type === 1) {
    promise(postUserUpdate(user), "修改成功");
  }
};

const show = () => {
  options.title = "新增用户";
  options.type = 0;
  formModel.avatar = "";
  formModel.username = "";
  formModel.realname = "";
  formModel.phone = "";
  formModel.id = null;
  formModel.password = "";
  formModel.sex = 0;
  formModel.status = 0;
  formModel.email = "";
  formModel.birthday = "";
  drawer.value?.init();
  loading.value = false;
  formRef.value?.clearValidate();
  // rules.password = {
  //   required: true,
  //   message: "请输入密码1",
  // };
};

const edit = (data: UserListType) => {
  options.title = "修改用户";
  options.type = 1;
  formModel.avatar = data.avatar;
  formModel.username = data.username;
  formModel.realname = data.realname;
  formModel.phone = data.phone;
  formModel.id = data.id;
  formModel.password = "";
  formModel.email = data.email;
  formModel.sex = data.sex;
  formModel.birthday = data.birthday;
  formModel.status = data.status;
  loading.value = false;
  drawer.value?.init();
  formRef.value?.clearValidate();
  rules.password = {
    required: false,
    message: "请输入密码",
  };
};

const handleAvatar = (e) => {
  formModel.avatar = e;
  nextTick(() => {
    formRef.value?.clearValidate();
  });
};

defineExpose({
  show,
  edit,
});
</script>

<template>
  <jin-drawer
    ref="drawer"
    :title="options.title"
    :width="600"
    @ok="handleOk"
    @cancel="handleCancel"
    @beforeOk="handleSubmit"
    :loading="loading"
    :ok-loading="loading"
  >
    <a-form
      auto-label-width
      :model="formModel"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item
        label="用户账号"
        field="username"
      >
        <a-input
          v-model.trim="formModel.username"
          allow-clear
          placeholder="请输入账号"
        />
      </a-form-item>

      <a-form-item
        label="用户姓名"
        field="realname"
      >
        <a-input
          v-model="formModel.realname"
          allow-clear
          placeholder="请输入姓名"
        />
      </a-form-item>

      <a-form-item
        label="手机号"
        field="phone"
      >
        <a-input
          v-model.trim="formModel.phone"
          allow-clear
          placeholder="请输入手机号"
        />
      </a-form-item>
      <a-form-item
        label="邮箱"
        field="email"
      >
        <a-input
          v-model.trim="formModel.email"
          allow-clear
          placeholder="请输入邮箱"
        />
      </a-form-item>
      <a-form-item
        label="生日"
        field="birthday"
      >
        <a-date-picker
          style="width: 100%;"
          v-model="formModel.birthday"
        />
      </a-form-item>
      <a-form-item
        label="性别"
        field="sex"
      >
        <a-radio-group v-model="formModel.sex">
          <a-radio :value="0">女</a-radio>
          <a-radio :value="1">男</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="头像"
        field="avatar"
      >
        <jin-avatar-upload
          :value="formModel.avatar"
          @update:value="handleAvatar"
        />
      </a-form-item>
      <a-form-item
        label="密码"
        field="password"
        v-if="options.type === 0"
      >
        <a-input-password
          v-model="formModel.password"
          allow-clear
          placeholder="请输入密码"
        ></a-input-password>
      </a-form-item>
      <a-form-item
        label="状态"
        field="status"
      >
        <a-radio-group v-model="formModel.status">
          <a-radio :value="0">正常</a-radio>
          <a-radio :value="1">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </jin-drawer>
</template>

<style scoped lang="scss">
</style>